import React, { useEffect, useState } from 'react';
import "./myRecord.scss";
import { getMyRecordHistory, deteleRecord } from "../../../../api/myRecord"
import { Table, Space, Input, Button, Modal, message } from 'antd';
import { HighlightTwoTone, DeleteTwoTone } from "@ant-design/icons"
const { Column } = Table;
const MyRecord = (props) => {
    const [myRecord, setMyRecord] = useState([])
    const [deleteRecordId, setDeleteRecordId] = useState(0)
    const getMYRecord = async()=>{
    let res = await getMyRecordHistory()
    setMyRecord(res.data.rows)
}
useEffect(async () => {
    getMYRecord()
}, [])
const jumpAdd = () => {
    props.history.push("/home/addrecord")
}
const [isModalVisible, setIsModalVisible] = useState(false);

const showModal = (id) => {
    setDeleteRecordId(id)
    setIsModalVisible(true);
};

const handleOk = async () => {
    let res = await deteleRecord(deleteRecordId)
    console.log(res.data.msg);
    message.success(res.data.msg)
    let result = await getMyRecordHistory()
    setMyRecord(result.data.rows)
    setIsModalVisible(false);
};

const handleCancel = () => {
    setIsModalVisible(false);
};
const searchRecord = async e => {
    if (e.target.value === "") {
        let result = await getMyRecordHistory()
        setMyRecord(result.data.rows)
    } else {
        let res = await getMyRecordHistory({
            searchTitle: e.target.value
        })
        setMyRecord(res.data.rows)
    }
}
const jumpEdit = (id) => {
    props.history.push("/home/editrecord/" + id)
}
return (
    <div id="myRecord">
        <div className="bottomItem" name="searchTitle">
            <p><input type="checkbox" /><span>仅查看正常</span></p>
            <Input placeholder="搜索岗位/公司名称" onChange={(e) => {
                searchRecord(e)
            }} />
            <Button type="primary" onClick={() => {
                jumpAdd()
            }}>+添加面试记录</Button>
        </div>
        <Table dataSource={myRecord}>
            <Column title="岗位名称" dataIndex="stationName" key="interviewId" />
            <Column title="公司名称" dataIndex="companyName" key="interviewId" />
            <Column title="面试时间" dataIndex="interviewTime" key="interviewId" />
            <Column title="面试官" dataIndex="intervierManagement" key="interviewId" />
            <Column title="专业" dataIndex="majorName" key="interviewId" />
            <Column title="提交人" dataIndex="commitName" key="interviewId" />
            <Column title="面试结果" dataIndex="status" key="interviewId" render={(text) => {
                if (text === 0) return <span>不确定</span>
                if (text === 1) return <span style={{ color: "#0f0" }}>通过</span>
                if (text === 2) return <span style={{ color: "red" }}>未通过</span>
            }} />
            <Column title="录音" dataIndex="issoundrecord" key="interviewId" render={text => {
                return text === 0 ? <span>无</span> : <span>有</span>
            }} />
            <Column title="屏蔽" dataIndex="shield" key="interviewId" render={text => {
                return text === 0 ? <span style={{ color: "red" }}>被屏蔽</span> : <span>正常</span>
            }} />
            <Column
                title="操作"
                key="action"
                render={(text, record) => (
                    <Space size="middle">
                        <HighlightTwoTone onClick={() => { jumpEdit(record.interviewId) }} />
                        <DeleteTwoTone onClick={() => { showModal(record.interviewId) }} />
                    </Space>
                )}
            />
        </Table>
        <Modal title="删除" visible={isModalVisible} cancelText="取消" okText="确认删除" onOk={handleOk} onCancel={handleCancel}>
            <p>你确定要删除吗</p>
        </Modal>
    </div>
);
};

export default MyRecord;